<template>
    <div id="flame-graph" :style="{ ...style, overflowX: 'hidden', width: '100vw' }" ref="graphRef"></div>
</template>

<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';
import * as d3 from 'd3'
import { transformFlameData } from './util'
import useGraph from './useGraph';
import {isEmpty} from 'lodash'

const props = defineProps({
    style: {
        type: Object,
    },
    activeItem: {type:Object,
      default: () => ({})

    },
    isActive: Boolean
})
const graphRef = ref()
const p = {
    activeItem: props.activeItem,
    isActive: props.isActive,
    chart: graphRef
}

const { getFlameGraphData } = useGraph({props, chartRef:graphRef})

// watchEffect(() => {
//     if (graphRef.value) {
//         console.log(graphRef.value);

//         generateFlameGraph(transformFlameData(data))
//     } else {
//         // not mounted yet, or the element was unmounted (e.g. by v-if)
//     }
// })
watch([()=> props.isActive, () => props.activeItem], ([isActive, item]) => {
  console.log(item, 'item');

  if(isActive && !isEmpty(item)){
    getFlameGraphData();
  }
})
onUnmounted(() => {
  d3.select("#flame-graph").selectAll("svg").remove();
})

</script>

<style scoped lang="less"></style>
